﻿<template>
  <div class="weather-warning">
    <!-- 页面头部 -->
    <div class="page-header">
      <i class="el-icon-warning-outline header-icon"></i>
      <h1 class="page-title">气象预警信息</h1>
      <el-button type="primary" class="refresh-btn" @click="refreshData">
        <i class="el-icon-refresh"></i>
        刷新数据
      </el-button>
    </div>

    <!-- 天气概览 -->
    <div class="weather-overview">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6">
          <div class="weather-card">
            <div class="card-header">
              <h3>当前天气</h3>
              <span class="location">{{ currentWeather.location }}</span>
            </div>
            <div class="weather-content">
              <i :class="currentWeather.icon" class="weather-icon"></i>
              <div class="weather-info">
                <div class="temperature">{{ currentWeather.temperature }}C</div>
                <div class="condition">{{ currentWeather.condition }}</div>
                <div class="details">
                  <div>湿度: {{ currentWeather.humidity }}%</div>
                  <div>风速: {{ currentWeather.windSpeed }}m/s</div>
                  <div>能见度: {{ currentWeather.visibility }}km</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="6">
          <div class="weather-card">
            <div class="card-header">
              <h3>预警信息</h3>
            </div>
            <div class="warning-content">
              <i :class="getWarningIcon()" class="warning-icon"></i>
              <div class="warning-text">
                <div class="warning-title">{{ getWarningLevelText() }}</div>
                <div class="warning-desc">{{ warningInfo.description }}</div>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="6">
          <div class="weather-card">
            <div class="card-header">
              <h3>建议措施</h3>
            </div>
            <div class="suggestion-content">
              <i class="el-icon-lightbulb suggestion-icon"></i>
              <div class="suggestion-text">
                <div class="suggestion-title">安全建议</div>
                <div class="suggestion-desc">{{ suggestionInfo.title }}</div>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="6">
          <div class="weather-card">
            <div class="card-header">
              <h3>未来预报</h3>
            </div>
            <div class="forecast-content">
              <div v-for="item in forecast" :key="item.date" class="forecast-item">
                <div class="forecast-date">{{ item.date }}</div>
                <i :class="item.icon" class="forecast-icon"></i>
                <div class="forecast-temp">{{ item.temperature }}</div>
                <div class="forecast-text">{{ item.condition }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 详细预警信息 -->
    <div class="detailed-warning">
      <el-card>
        <template #header>
          <div style="display: flex; justify-content: space-between; align-items: center;">
            <span>详细预警信息</span>
            <el-tag :type="getWarningTagType()" size="large">
              {{ getWarningLevelText() }}
            </el-tag>
          </div>
        </template>
        <div class="warning-detail-content">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12">
              <div class="detail-section">
                <h4>影响范围</h4>
                <ul class="impact-list">
                  <li v-for="impact in warningInfo.impacts" :key="impact">
                    <i class="el-icon-location-outline"></i>
                    {{ impact }}
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12">
              <div class="detail-section">
                <h4>防护措施</h4>
                <ul class="measure-list">
                  <li v-for="measure in suggestionInfo.measures" :key="measure">
                    <i class="el-icon-check"></i>
                    {{ measure }}
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>

    <!-- 预警历史 -->
    <div class="warning-history">
      <el-card>
        <template #header>
          <span>预警历史记录</span>
        </template>
        <el-table :data="warningHistory" style="width: 100%">
          <el-table-column prop="date" label="日期" width="120"></el-table-column>
          <el-table-column prop="time" label="时间" width="100"></el-table-column>
          <el-table-column prop="level" label="预警等级" width="120">
            <template #default="scope">
              <el-tag :type="getHistoryTagType(scope.row.level)" size="small">
                {{ getHistoryLevelText(scope.row.level) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="预警类型" width="120"></el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'" size="small">
                {{ scope.row.status === 'active' ? '生效中' : '已解除' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { ElMessage } from "element-plus"

// 定义接口
interface WeatherData {
  location: string
  temperature: number
  condition: string
  humidity: number
  windSpeed: number
  visibility: number
  icon: string
}

interface WarningInfo {
  level: string
  description: string
  impacts: string[]
}

interface SuggestionInfo {
  title: string
  measures: string[]
}

interface ForecastItem {
  date: string
  temperature: string
  condition: string
  icon: string
}

interface WarningHistoryItem {
  date: string
  time: string
  level: string
  type: string
  description: string
  status: string
}

// 响应式数据
const currentWeather = ref<WeatherData>({
  location: "北京市",
  temperature: 25,
  condition: "多云",
  humidity: 65,
  windSpeed: 3.2,
  visibility: 10,
  icon: "el-icon-cloudy"
})

const warningLevel = ref<string>("high")
const warningInfo = ref<WarningInfo>({
  level: "high",
  description: "预计未来6小时内将出现强降雨天气，降雨量可能达到50-80毫米，请做好防范准备。",
  impacts: [
    "道路积水风险增加",
    "能见度降低影响交通",
    "山区地质灾害风险",
    "城市内涝可能性增大"
  ]
})

const suggestionInfo = ref<SuggestionInfo>({
  title: "请密切关注天气变化，做好防护措施",
  measures: [
    "避免在低洼地区停留",
    "减少户外活动",
    "检查排水设施",
    "准备应急物资",
    "关注官方预警信息"
  ]
})

const forecast = ref<ForecastItem[]>([
  { date: "今天", temperature: "25C", condition: "多云", icon: "el-icon-cloudy" },
  { date: "明天", temperature: "22C", condition: "小雨", icon: "el-icon-light-rain" },
  { date: "后天", temperature: "20C", condition: "中雨", icon: "el-icon-heavy-rain" },
  { date: "周三", temperature: "18C", condition: "大雨", icon: "el-icon-heavy-rain" }
])

const warningHistory = ref<WarningHistoryItem[]>([
  {
    date: "2024-01-15",
    time: "08:00",
    level: "high",
    type: "暴雨预警",
    description: "预计未来6小时内将出现强降雨",
    status: "active"
  },
  {
    date: "2024-01-14",
    time: "14:30",
    level: "medium",
    type: "大风预警",
    description: "预计未来3小时内将出现6-7级大风",
    status: "inactive"
  },
  {
    date: "2024-01-13",
    time: "10:15",
    level: "low",
    type: "雾霾预警",
    description: "预计未来12小时内将出现轻度雾霾",
    status: "inactive"
  }
])

// 获取预警等级文本
const getWarningLevelText = () => {
  switch (warningLevel.value) {
    case "high": return "红色预警"
    case "medium": return "橙色预警"
    case "low": return "黄色预警"
    default: return "未知"
  }
}

// 获取预警等级样式类
const getWarningLevelClass = () => {
  return `warning-${warningLevel.value}`
}

// 获取预警图标
const getWarningIcon = () => {
  switch (warningLevel.value) {
    case "high": return "icon-warning-high"
    case "medium": return "icon-warning-medium"
    case "low": return "icon-warning-low"
    default: return "icon-warning-unknown"
  }
}

// 获取预警标签类型
const getWarningTagType = () => {
  switch (warningLevel.value) {
    case "high": return "danger"
    case "medium": return "warning"
    case "low": return "info"
    default: return "info"
  }
}

// 获取历史记录标签类型
const getHistoryTagType = (level: string) => {
  switch (level) {
    case "high": return "danger"
    case "medium": return "warning"
    case "low": return "info"
    default: return "info"
  }
}

// 获取历史记录等级文本
const getHistoryLevelText = (level: string) => {
  switch (level) {
    case "high": return "红色预警"
    case "medium": return "橙色预警"
    case "low": return "黄色预警"
    default: return "未知"
  }
}

// 刷新数据
const refreshData = () => {
  ElMessage.success("数据已刷新")
  // 这里可以添加实际的数据刷新逻辑
}

// 组件挂载时初始化
onMounted(() => {
  console.log("气象预警页面已加载")
})
</script>

<style scoped>
.weather-warning {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.header-icon {
  font-size: 32px;
  margin-right: 15px;
}

.page-title {
  flex: 1;
  margin: 0;
  color: #2c3e50;
  font-size: 28px;
  font-weight: 600;
}

.refresh-btn {
  margin-left: auto;
}

.weather-overview {
  margin-bottom: 30px;
}

.weather-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.weather-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.card-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}

.location {
  color: #7f8c8d;
  font-size: 14px;
}

.weather-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.weather-icon {
  font-size: 48px;
  color: #3498db;
}

.weather-info {
  flex: 1;
}

.temperature {
  font-size: 36px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 5px;
}

.condition {
  font-size: 16px;
  color: #7f8c8d;
  margin-bottom: 10px;
}

.details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  color: #95a5a6;
}

.warning-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.warning-icon {
  font-size: 48px;
  color: #e74c3c;
}

.warning-text {
  flex: 1;
}

.warning-title {
  font-size: 20px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 8px;
}

.warning-desc {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.5;
}

.suggestion-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.suggestion-icon {
  font-size: 48px;
  color: #27ae60;
}

.suggestion-text {
  flex: 1;
}

.suggestion-title {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 8px;
}

.suggestion-desc {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.5;
}

.forecast-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.forecast-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  background: rgba(240, 240, 240, 0.5);
  border-radius: 10px;
}

.forecast-date {
  font-weight: bold;
  color: #2c3e50;
  min-width: 50px;
}

.forecast-icon {
  font-size: 24px;
  color: #3498db;
}

.forecast-temp {
  font-weight: bold;
  color: #2c3e50;
  min-width: 80px;
}

.forecast-text {
  color: #7f8c8d;
  font-size: 14px;
}

.detailed-warning {
  margin-bottom: 30px;
}

.warning-detail-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.warning-detail-content {
  padding: 20px 0;
}

.detail-section h4 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
}

.impact-list,
.measure-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.impact-list li,
.measure-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.impact-list li:last-child,
.measure-list li:last-child {
  border-bottom: none;
}

.impact-list li i,
.measure-list li i {
  color: #3498db;
  font-size: 16px;
}

.warning-history {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .weather-warning {
    padding: 10px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .weather-content,
  .warning-content,
  .suggestion-content {
    flex-direction: column;
    text-align: center;
  }
  
  .forecast-item {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  
  .temperature {
    font-size: 28px;
  }
  
  .weather-icon,
  .warning-icon,
  .suggestion-icon {
    font-size: 36px;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.weather-card {
  animation: fadeInUp 0.6s ease-out;
}

.weather-card:nth-child(1) { animation-delay: 0.1s; }
.weather-card:nth-child(2) { animation-delay: 0.2s; }
.weather-card:nth-child(3) { animation-delay: 0.3s; }
.weather-card:nth-child(4) { animation-delay: 0.4s; }

/* Element Plus 样式覆盖 */
:deep(.el-card) {
  border: none;
  box-shadow: none;
}

:deep(.el-card__header) {
  background: transparent;
  border-bottom: 2px solid #f0f0f0;
  padding: 20px 20px 15px;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-table) {
  background: transparent;
}

:deep(.el-table th) {
  background: rgba(240, 240, 240, 0.5);
  color: #2c3e50;
  font-weight: 600;
}

:deep(.el-table td) {
  border-bottom: 1px solid rgba(240, 240, 240, 0.5);
}

:deep(.el-table__row:hover) {
  background: rgba(240, 240, 240, 0.3);
}

:deep(.el-tag) {
  border: none;
  font-weight: 600;
}

:deep(.el-button) {
  border-radius: 8px;
  font-weight: 500;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

:deep(.el-button--primary:hover) {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}
</style>